<template>

    <div id="Login">
        <Card style="width: 440px;height: 100%;">
            <Form ref="formInline" :model="formInline" :rules="ruleInline">
                <FormItem prop="username">
                    <Input type="text" icon="md-person" class="input" size="large" v-model="formInline.username"
                        placeholder="用户名">
                    </Input>
                </FormItem>
                <FormItem prop="password">
                    <Input type="password" icon="ios-lock-outline" class="input" size="large"
                        v-model="formInline.password" placeholder="密码">
                    </Input>
                </FormItem>


                <div class="demo-auto-login">
                    <Checkbox v-model="autoLogin" size="large">自动登录</Checkbox>
                    <a>忘记密码</a>
                </div>

                <FormItem>
                    <Button type="success" class="input" size="large" @click="handleSubmit('formInline')">登录</Button>
                </FormItem>
                <FormItem>
                    <Button type="primary" class="input" size="large" @click="handleReset">注册</Button>
                </FormItem>
            </Form>
        </Card>
    </div>

</template>
<script>
    import api from '../network/api/Login.js'
    export default {
        name: 'Login',
        data() {
            return {
                formInline: {
                    username: '李权',
                    password: 'LQ20010311',
                },
                ruleInline: {
                    username: [
                        { required: true, message: '请输入用户名', trigger: 'blur' }
                    ],
                    password: [
                        { required: true, message: '请输入密码.', trigger: 'blur' },
                        { type: 'string', min: 6, message: '密码不少于六位', trigger: 'blur' }
                    ],


                }
            }
        },
        methods: {
            handleSubmit(name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        let _this = this;
                        api.Login(_this.formInline).then(res => {
                            if (res.data[0].token != null) {
                                _this.$store.commit('SET_TOKEN',res.data[0].token);
                                _this.$store.commit('GET_USER', JSON.stringify(res.data[0].user)) 
                                _this.$router.replace({path:'/app'});

                                // 本地存储JSON.stringify(json转为字符串)
                                // localStorage.setItem('access-admin', JSON.stringify(res.data));
                                //本地存储
                                // localStorage.setItem('token', res.data[0].token);
                                // _this.$router.replace({path:'/app'});

                                //获取本地token
                                //JSON.parse( Window.localStorage.getItem("token"));
                                this.$Message.success('登陆成功!');
                            }else{
                                this.$Message.error('用户名和密码错误！');
                            }
                        });

                    } else {
                        this.$Message.error('请输入用户名和密码');
                    }
                })
            },
            handleReset(){
                this.$router.replace({path:'/Register'})
            }
        }
    }
</script>
<style>
    #Login {
        width: 400px;
        margin: 0 auto !important;
        padding-top: 200px;
    }

    .input {
        width: 400px;
    }

    .demo-auto-login {
        padding-top: 1px;
        text-align: left;
        margin-bottom: 10px;
    }

    .demo-auto-login a {
        float: right;
    }
</style>